<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>实时监控 - 公共交通异常检测系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/traffic-monitor.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
	</head>
	<body>
		<div id="app">
			<!-- 加载遮罩 -->
			<transition name="fade">
				<div v-if="loading" class="loading-overlay">
					<div class="loading-content">
						<div class="loading-spinner">
							<i class="el-icon-loading"></i>
						</div>
						<div>{{ loadingText }}</div>
					</div>
				</div>
			</transition>

			<!-- 主框架 -->
			<div class="admin-layout" v-show="!loading">
				<!-- 顶部导航栏 -->
				<header class="admin-header">
					<div class="header-left">
						<div class="logo-section">
							<img :src="logoUrl" alt="公共交通异常检测系统" class="header-logo" @error="handleLogoError">
							<h1 class="system-title">公共交通异常检测系统</h1>
						</div>
						<div class="breadcrumb-section">
							<el-breadcrumb separator="/">
								<el-breadcrumb-item>交通监控</el-breadcrumb-item>
								<el-breadcrumb-item>实时监控</el-breadcrumb-item>
							</el-breadcrumb>
						</div>
					</div>

					<div class="header-right">
						<el-badge :value="notificationCount" class="notification-badge">
							<el-button type="text" @click="showNotifications">
								<i class="el-icon-bell"></i>
							</el-button>
						</el-badge>

						<el-dropdown @command="handleUserCommand" class="user-dropdown">
							<div class="user-info">
								<el-avatar :size="32" :src="userInfo.avatar || './img/myphoto2.jpg'" icon="el-icon-user-solid"></el-avatar>
								<span class="username">{{ userInfo.username }}</span>
								<i class="el-icon-arrow-down"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="profile">
									<i class="el-icon-user"></i> 个人信息
								</el-dropdown-item>
								<el-dropdown-item command="settings">
									<i class="el-icon-setting"></i> 系统设置
								</el-dropdown-item>
								<el-dropdown-item divided command="logout">
									<i class="el-icon-switch-button"></i> 退出登录
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</header>

				<!-- 主内容区 -->
				<div class="admin-main">
					<!-- 侧边导航 -->
					<aside class="admin-sidebar" :class="{ 'collapsed': sidebarCollapsed }">
						<div class="sidebar-toggle" @click="toggleSidebar">
							<i :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
						</div>

						<el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" @select="handleMenuSelect"
							:default-openeds="['traffic']" class="sidebar-menu">
							<el-menu-item index="dashboard">
								<i class="el-icon-data-board"></i>
								<span slot="title">首页</span>
							</el-menu-item>

							<el-submenu index="traffic">
								<template slot="title">
									<i class="el-icon-location"></i>
									<span>交通监控</span>
								</template>
								<el-menu-item index="traffic-monitor">实时监控</el-menu-item>
								<el-menu-item index="traffic-analysis">数据分析</el-menu-item>
								<el-menu-item index="traffic-alert">预警管理</el-menu-item>
							</el-submenu>

							<el-submenu index="vehicle">
								<template slot="title">
									<i class="el-icon-truck"></i>
									<span>车辆管理</span>
								</template>
								<el-menu-item index="vehicle-list">车辆列表</el-menu-item>
								<el-menu-item index="vehicle-tracking">车辆追踪</el-menu-item>
								<el-menu-item index="vehicle-maintenance">维护记录</el-menu-item>
							</el-submenu>

							<el-submenu index="data">
								<template slot="title">
									<i class="el-icon-pie-chart"></i>
									<span>数据统计</span>
								</template>
								<el-menu-item index="data-overview">数据概览</el-menu-item>
								<el-menu-item index="data-report">报表生成</el-menu-item>
								<el-menu-item index="data-export">数据导出</el-menu-item>
							</el-submenu>

							<el-menu-item index="system">
								<i class="el-icon-setting"></i>
								<span slot="title">系统管理</span>
							</el-menu-item>
						</el-menu>
					</aside>

					<!-- 监控内容区域 -->
					<main class="admin-content">
						<!-- 监控视频网格 -->
						<div class="camera-section">
							<div class="section-header">
								<h3>实时监控</h3>
								<div class="section-filters">
									<el-radio-group v-model="vehicleFilter" size="small">
										<el-radio-button label="all">全部</el-radio-button>
										<el-radio-button label="bus">公交车</el-radio-button>
										<el-radio-button label="metro">地铁</el-radio-button>
										<el-radio-button label="taxi">出租车/网约车</el-radio-button>
									</el-radio-group>
								</div>
							</div>
							<div class="camera-grid">
								<div class="camera-card" v-for="camera in filteredCameras" :key="camera.id">
									<div class="camera-feed">
										<video :src="camera.streamUrl" autoplay loop muted style="width: 100%; height: 100%; object-fit: contain; background: #000;">
											您的浏览器不支持视频播放
										</video>
										<div class="camera-overlay" v-if="camera.alert">
											<div class="alert-badge" :class="camera.alert.type">
												{{ camera.alert.message }}
											</div>
										</div>
									</div>
									<div class="camera-info">
										<div class="camera-title">
											<span>{{ camera.name }}</span>
											<el-tag size="mini" :type="camera.vehicleType === 'bus' ? 'success' : 'warning'">
												{{ camera.vehicleType === 'bus' ? '公交车' : '出租车' }}
											</el-tag>
										</div>
										<div class="camera-details">
											<div class="detail-item">
												<i class="el-icon-user"></i>
												<span>驾驶员：{{ camera.driverName }}</span>
											</div>
											<div class="detail-item">
												<i class="el-icon-location"></i>
												<span>车牌号：{{ camera.plateNumber }}</span>
											</div>
										</div>
										<div class="camera-status">
											<span class="status-indicator" :class="'status-' + camera.status"></span>
											{{ getStatusText(camera.status) }}
										</div>
									</div>
								</div>
							</div>
							<div class="section-footer">
								<el-button type="text" @click="handleViewMore">
									<i class="el-icon-more"></i> 查看更多监控
								</el-button>
							</div>
						</div>

						<!-- 实时告警列表 -->
						<div class="alert-list">
							<div class="alert-header">
								<h3>实时告警</h3>
								<div class="alert-filters">
									<el-radio-group v-model="alertFilter" size="small">
										<el-radio-button label="all">全部</el-radio-button>
										<el-radio-button label="bus">公交车</el-radio-button>
										<el-radio-button label="metro">地铁</el-radio-button>
										<el-radio-button label="taxi">出租车/网约车</el-radio-button>
									</el-radio-group>
								</div>
							</div>
							<div v-for="alert in displayedAlerts" :key="alert.id" 
								 class="alert-item" 
								 :class="'alert-' + alert.level">
								<div class="alert-header">
									<div class="alert-title">
										<i :class="getAlertIcon(alert.vehicleType)"></i>
										<strong>{{ alert.title }}</strong>
									</div>
									<span class="alert-time">{{ alert.time }}</span>
								</div>
								<div class="alert-body">
									<div class="alert-description">{{ alert.description }}</div>
									<div class="alert-details">
										<span>
											<i :class="getVehicleIcon(alert.vehicleType)"></i>
											车辆：{{ alert.vehicle }}
										</span>
										<span>
											<i class="el-icon-location"></i>
											位置：{{ alert.location }}
										</span>
										<span>
											<i class="el-icon-user"></i>
											驾驶员：{{ alert.driver }}
										</span>
									</div>
								</div>
								<div class="alert-actions">
									<el-button type="text" size="small" @click="handleAlert(alert.id)">
										<i class="el-icon-video-camera"></i> 查看监控
									</el-button>
									<el-button type="text" size="small" @click="handleEmergency(alert.id)">
										<i class="el-icon-warning"></i> 应急处置
									</el-button>
								</div>
							</div>
							<div class="alert-footer" v-if="hasMoreAlerts">
								<el-button type="text" @click="handleViewMoreAlerts">
									<i class="el-icon-more"></i> 查看更多告警
								</el-button>
							</div>
						</div>
					</main>
				</div>
			</div>

			<!-- 通知抽屉 -->
			<el-drawer title="系统通知" :visible.sync="notificationDrawer" direction="rtl" size="400px">
				<div class="notification-list">
					<div class="notification-item" v-for="notification in notifications" :key="notification.id">
						<div class="notification-content">
							<h4>{{ notification.title }}</h4>
							<p>{{ notification.content }}</p>
							<span class="notification-time">{{ notification.time }}</span>
						</div>
						<el-button type="text" @click="markAsRead(notification.id)">
							<i class="el-icon-check"></i>
						</el-button>
					</div>
				</div>
			</el-drawer>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 系统状态
						loading: true,
						loadingText: '正在加载实时监控数据...',
						sidebarCollapsed: false,
						activeMenu: 'traffic-monitor',

						// 用户信息
						userInfo: {
							username: '管理员',
							role: 'admin',
							avatar: './img/myphoto2.jpg'
						},

						// Logo
						logoUrl: './img/logo_nobackground.png',

						// 通知
						notificationCount: 3,
						notificationDrawer: false,
						notifications: [{
							id: 1,
							title: '系统更新通知',
							content: '系统将在今晚23:00进行维护更新，预计耗时2小时',
							time: '2025-05-26 14:30',
							read: false
						}],

						// 统计数据
						stats: {},

						// 添加车辆类型过滤器
						vehicleFilter: 'all',

						// 修改监控摄像头数据
						cameras: [
							{
								id: 1,
								name: '105路公交车',
								streamUrl: './img/公交车1.mp4',
								status: 'warning',
								vehicleType: 'bus',
								driverName: '张师傅',
								plateNumber: '渝BW2273',
								alert: {
									type: 'warning',
									//message: '疲劳驾驶预警'
								}
							},
							{
								id: 2,
								name: '132路公交车',
								streamUrl: './img/公交车2.mp4',
								status: 'normal',
								vehicleType: 'bus',
								driverName: '龚师傅',
								plateNumber: '渝BW7542',
								alert: null
							},
							{
								id: 3,
								name: '曹操出行网约车1',
								streamUrl: './img/网约车1.mp4',
								status: 'normal',
								vehicleType: 'taxi',
								driverName: '王师傅',
								plateNumber: '渝CB9125',
								alert: null
							},
							{
								id: 4,
								name: '滴滴出行网约车1',
								streamUrl: './img/网约车2.mp4',
								status: 'normal',
								vehicleType: 'taxi',
								driverName: '杨师傅',
								plateNumber: '渝A2057M',
								alert: null
							}
						],

						// 告警过滤器
						alertFilter: 'all',

						// 告警数据
						alerts: [
							{
								id: 1,
								vehicleType: 'bus',
								title: '疲劳驾驶预警',
								description: '系统检测到驾驶员连续驾驶时间超过3小时，存在疲劳驾驶风险',
								time: '2025-05-26 15:30',
								level: 'warning',
								vehicle: '渝BW2273 (105路公交车)',
								location: '大学城美院 - 区门诊',
								driver: '张师傅'
							},
							/* {
								id: 2,
								vehicleType: 'metro',
								title: '乘客冲突事件',
								description: '3号线列车内检测到乘客发生言语冲突，可能存在肢体冲突风险',
								time: '2025-05-26 15:25',
								level: 'danger',
								vehicle: 'MT3001 (3号线地铁)',
								location: '观音桥站',
								driver: '李师傅'
							},
							{
								id: 3,
								vehicleType: 'taxi',
								title: '异常行为检测',
								description: '检测到乘客有可疑的异常行为，建议驾驶员注意',
								time: '2025-05-26 15:20',
								level: 'warning',
								vehicle: '渝B98765 (网约车)',
								location: '解放碑',
								driver: '赵师傅'
							} */
						]
					};
				},

				computed: {
					// 添加过滤后的摄像头列表
					filteredCameras() {
						if (this.vehicleFilter === 'all') {
							return this.cameras;
						}
						return this.cameras.filter(camera => camera.vehicleType === this.vehicleFilter);
					},
					filteredAlerts() {
						if (this.alertFilter === 'all') {
							return this.alerts;
						}
						return this.alerts.filter(alert => alert.vehicleType === this.alertFilter);
					},
					
					displayedAlerts() {
						return this.filteredAlerts.slice(0, 2);
					},

					hasMoreAlerts() {
						return this.filteredAlerts.length > 2;
					}
				},

				mounted() {
					this.initSystem();
				},

				methods: {
					// 系统初始化
					async initSystem() {
						try {
							// 检查登录状态
							const authToken = localStorage.getItem('authToken');
							const userInfoStr = localStorage.getItem('userInfo');

							if (!authToken || !userInfoStr) {
								this.$message.warning('请先登录系统');
								setTimeout(() => {
									window.location.href = './login.html';
								}, 1000);
								return;
							}

							// 解析用户信息
							const userInfo = JSON.parse(userInfoStr);
							this.userInfo = userInfo;

							// 模拟加载数据
							setTimeout(() => {
								this.loading = false;
							}, 1000);

						} catch (error) {
							console.error('System initialization error:', error);
							this.$message.error('系统初始化失败');
						}
					},

					// 获取状态文本
					getStatusText(status) {
						const statusMap = {
							normal: '正常',
							warning: '警告',
							danger: '异常'
						};
						return statusMap[status] || '未知';
					},

					// 通用方法
					toggleSidebar() {
						this.sidebarCollapsed = !this.sidebarCollapsed;
					},

					handleMenuSelect(index) {
						if (index === this.activeMenu) return;
						window.location.href = index === 'dashboard' ? 'index.html' : `${index}.html`;
					},

					handleUserCommand(command) {
						switch (command) {
							case 'profile':
								this.$message.info('个人信息功能开发中');
								break;
							case 'settings':
								this.$message.info('系统设置功能开发中');
								break;
							case 'logout':
								this.handleLogout();
								break;
						}
					},

					handleLogout() {
						this.$confirm('确定要退出登录吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							localStorage.removeItem('authToken');
							localStorage.removeItem('userInfo');
							this.$message.success('已安全退出');
							setTimeout(() => {
								window.location.href = './login.html';
							}, 1000);
						});
					},

					showNotifications() {
						this.notificationDrawer = true;
					},

					markAsRead(id) {
						const notification = this.notifications.find(n => n.id === id);
						if (notification && !notification.read) {
							notification.read = true;
							this.notificationCount = Math.max(0, this.notificationCount - 1);
							this.$message.success('已标记为已读');
						}
					},

					handleLogoError() {
						this.logoUrl = '';
					},

					getAlertIcon(type) {
						const iconMap = {
							bus: 'el-icon-warning',
							metro: 'el-icon-bell',
							taxi: 'el-icon-message'
						};
						return iconMap[type] || 'el-icon-info';
					},

					getVehicleIcon(type) {
						const iconMap = {
							bus: 'el-icon-truck',
							metro: 'el-icon-train',
							taxi: 'el-icon-car'
						};
						return iconMap[type] || 'el-icon-location-information';
					},

					handleAlert(alertId) {
						this.$message.info(`正在调取告警 ${alertId} 的监控画面`);
					},

					handleEmergency(alertId) {
						this.$confirm('是否确认启动应急处置流程？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message.success('已启动应急处置流程');
						});
					},

					// 添加查看更多方法
					handleViewMore() {
						this.$message.info('正在开发更多监控画面功能');
					},

					handleViewMoreAlerts() {
						this.$router.push('/traffic-alert');
					}
				}
			});
		</script>
	</body>
</html>